/* eslint-disable eqeqeq */
/* eslint-disable react/destructuring-assignment */

import React, { PureComponent } from 'react';
import { DownloadOutlined } from '@ant-design/icons';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Card, Row, Col, Tabs, Divider, Input, Button } from 'antd';
import router from 'umi/router';
import { connect } from 'dva';
import queryString from 'query-string';
import moment from 'moment';
import downloadFile, { matchDict } from '@/utils/utils';
import PageHeaderWrapper from '@/components/PageHeaderWrapper'; // 引入头部组件
import styles from '@/utils/utils.less';
import DescriptionList from '@/components/DescriptionList';
import FooterToolbar from '@/components/FooterToolbar';
import StandardTable from '@/components/StandardTable';
import TextOverFlow from '../../components/TextOverFlow';

const FormItem = Form.Item;
const { Description } = DescriptionList;
const { TabPane } = Tabs;

@Form.create()
@connect(({ socialinsurancehadpay, loading }) => ({
  socialinsurancehadpay,
  pageDetailData: socialinsurancehadpay.pageDetailData,
  loading: loading.models.socialinsurancehadpay,
}))
class BasicList extends PureComponent {
  state = {
    diffDetailStatus: 1, // 差异明细按纽状态： 1显示差异明细按钮  2.显示取消本次回盘，处理差异数据按钮
    scroll: { x: 1900, y: 420 }, // 表格 x 滚动条
    excelLoading: false,
  };

  componentDidMount() {
    const { location, dispatch } = this.props;
    const { id, rtnState, corpId } = queryString.parse(location.search);
    dispatch({
      type: 'socialinsurancehadpay/updateModelData',
      payload: {
        id,
        corpId,
        detailRtnState: rtnState,
      },
    });
    dispatch({
      type: 'socialinsurancehadpay/queryDictCodes',
      payload: ['BIZ_INS_TYPE', 'ACCO_STATUS', 'BIZ_WEAL_TYPE'],
    });
    this.getBillDto(id);
  }

  getBillDto = id => {
    const { dispatch } = this.props;
    dispatch({
      type: 'socialinsurancehadpay/getBillDto',
      payload: {
        billId: id,
      },
    });
  };

  detial = (currentPage = 1, pageSize = 10, isClear = true) => {
    const {
      form,
      dispatch,
      socialinsurancehadpay: { id, detailRtnState, corpId },
    } = this.props;
    if (isClear) {
      this.setState({
        selectedKeys: [],
        selectedRows: [],
      });
    }
    form.validateFields(['empName', 'certNo'], (err, values) => {
      if (err) return;
      dispatch({
        type: 'socialinsurancehadpay/fetchDetail',
        payload: {
          billId: id,
          rtnState: detailRtnState,
          corpId,
          pageArg: {
            currentPage,
            pageSize,
          },
          ...values,
        },
      });
    });
  };

  handleStandardTableChange = pagination => {
    this.detial(pagination.current, pagination.pageSize, false);
  };

  handleSelectRows = (selectedRows, selectedKeys) => {
    this.setState({ selectedRows, selectedKeys });
  };

  // tab页切换
  tabChange = activeKey => {
    const {
      location,
      socialinsurancehadpay: { id },
    } = this.props;
    const { pathname, query } = location;
    query.activeKey = activeKey;
    router.push({
      pathname,
      query,
    });
    if (activeKey === '1') {
      this.getBillDto(id);
    } else {
      this.detial();
    }
  };

  // 下载账单
  downBill = () => {
    // const { selectedRows } = this.state;
    const {
      socialinsurancehadpay: { id, detailRtnState },
    } = this.props;
    const inParam = [
      {
        billId: id,
        rtnState: detailRtnState,
      },
    ];
    this.setState({ excelLoading: true });
    downloadFile(inParam, '/osApi/insBillApi/execDownload', 'POST', () => {
      this.setState({ excelLoading: false });
    });
  };

  handleFormReset = () => {
    const { form } = this.props;
    form.resetFields();
  };

  goback = e => {
    e.preventDefault();
    router.push('/billmanagement/socialinsurancehadpay/index');
  };

  render() {
    const { selectedKeys, selectedRows, scroll, diffDetailStatus, excelLoading } = this.state;
    const {
      form: { getFieldDecorator },
      socialinsurancehadpay: { bizeType, insBillDetail },
      loading,
      pageDetailData,
    } = this.props;
    const diffShow = diffDetailStatus == 1 ? styles.show : styles.hide;
    const formItemLayout = {
      labelCol: { md: { span: 7 } },
      wrapperCol: { md: { span: 17 } },
    };
    const columns1 = [
      {
        title: '姓名',
        dataIndex: 'empName',
        align: 'center',
        width: 100,
        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({
          style: { fontWeight: 'bolder', textAlign: 'center' },
        }),
        fixed: 'left',
      },
      {
        title: '证件号',
        dataIndex: 'certNo',
        align: 'center',
        width: 200,
        onCell: () => ({ style: { textAlign: 'center' } }),
        onHeaderCell: () => ({
          style: { fontWeight: 'bolder', textAlign: 'center' },
        }),
        fixed: 'left',
      },
      {
        title: '个人社保账号',
        dataIndex: 'empAcco',
        align: 'center',
        width: 100,
        onHeaderCell: () => ({ style: { fontWeight: 'bolder', textAlign: 'center' } }),
        render: value => value || '--',
      },
      {
        title: '险种',
        dataIndex: 'ass',
        align: 'center',
        width: 100,
        onHeaderCell: () => ({ style: { fontWeight: 'bolder', textAlign: 'center' } }),
        render: (value, row) =>
          row.empAssList.map((item, index) => (
            <div>
              <p
                style={{
                  marginTop: 12,
                }}
              >
                <TextOverFlow text={matchDict(bizeType, item.ass)} lineClampNum={1} maxWidth={80} />
              </p>
              {index != row.empAssList.length - 1 ? <Divider type="horizontal" /> : null}
            </div>
          )),
      },
      {
        title: '个人险种账号',
        dataIndex: 'empAssAcco',
        align: 'center',
        width: 200,
        onHeaderCell: () => ({ style: { fontWeight: 'bolder', textAlign: 'center' } }),
        render: (value, row) =>
          row.empAssList.map((item, index) => (
            <div>
              <p style={{ marginTop: 12 }}>{item.empAssAcco ? item.empAssAcco : '--'}</p>
              {index != row.empAssList.length - 1 ? <Divider type="horizontal" /> : null}
            </div>
          )),
      },
      {
        title: '企业基数',
        dataIndex: 'unitBase',
        align: 'center',
        onHeaderCell: () => ({ style: { fontWeight: 'bolder', textAlign: 'center' } }),
        render: (value, row) =>
          row.empAssList.map((item, index) => (
            <div>
              <p style={{ marginTop: 12 }}>
                {item.unitBase || Number(item.unitBase) === 0 ? item.unitBase : '--'}
              </p>
              {index != row.empAssList.length - 1 ? <Divider type="horizontal" /> : null}
            </div>
          )),
      },
      {
        title: '个人基数',
        dataIndex: 'empBase',
        align: 'center',
        width: 100,
        onHeaderCell: () => ({ style: { fontWeight: 'bolder', textAlign: 'center' } }),
        render: (value, row) =>
          row.empAssList.map((item, index) => (
            <div>
              <p style={{ marginTop: 12 }}>
                {item.empBase || Number(item.empBase) === 0 ? item.empBase : '--'}
              </p>
              {index != row.empAssList.length - 1 ? <Divider type="horizontal" /> : null}
            </div>
          )),
      },
      {
        title: '当月应缴额',
        dataIndex: 'ymAmo',
        align: 'center',
        width: 100,
        className: diffShow,
        onHeaderCell: () => ({ style: { fontWeight: 'bolder', textAlign: 'center' } }),
        render: (value, row) =>
          row.empAssList.map((item, index) => (
            <div>
              <p style={{ marginTop: 12 }}>{item.ymAmo}</p>
              {index != row.empAssList.length - 1 ? <Divider type="horizontal" /> : null}
            </div>
          )),
      },
      // {
      //   title: '账户状态',
      //   dataIndex: 'accoStatus',
      //   align: 'center',
      //   width: 100,
      //   onHeaderCell: () => ({ style: { fontWeight: 'bolder', textAlign: 'center' } }),
      //   render: (value, row) =>
      //     row.empAssList.map((item, index) => (
      //       <div>
      //         <p style={{ marginTop: 12 }}>
      //           {item.accoStatus ? matchDict(accoStatusList, item.accoStatus) : '正常户'}
      //         </p>
      //         {index != row.empAssList.length - 1 ? <Divider type="horizontal" /> : null}
      //       </div>
      //     )),
      // },
      {
        title: '账单年月',
        dataIndex: 'billYm',
        align: 'center',
        width: 100,
        onHeaderCell: () => ({ style: { fontWeight: 'bolder', textAlign: 'center' } }),
        render: (value, row) =>
          row.empAssList.map((item, index) => (
            <div>
              <p style={{ marginTop: 12 }}>{item.billYm}</p>
              {index != row.empAssList.length - 1 ? <Divider type="horizontal" /> : null}
            </div>
          )),
      },
      {
        title: '业务年月',
        dataIndex: 'busiYm',
        align: 'center',
        width: 100,
        onHeaderCell: () => ({ style: { fontWeight: 'bolder', textAlign: 'center' } }),
        render: (value, row) =>
          row.empAssList.map((item, index) => (
            <div>
              <p style={{ marginTop: 12 }}>{item.busiYm}</p>
              {index != row.empAssList.length - 1 ? <Divider type="horizontal" /> : null}
            </div>
          )),
      },
      {
        title: '企业缴费',
        dataIndex: 'unitAmo',
        align: 'center',
        width: 90,
        onHeaderCell: () => ({ style: { fontWeight: 'bolder', textAlign: 'center' } }),
        render: (value, row) =>
          row.empAssList.map((item, index) => (
            <div>
              <p style={{ marginTop: 12 }}>{item.unitAmo}</p>
              {index != row.empAssList.length - 1 ? <Divider type="horizontal" /> : null}
            </div>
          )),
      },
      {
        title: '个人缴费',
        dataIndex: 'empAmo',
        align: 'center',
        width: 90,
        onHeaderCell: () => ({ style: { fontWeight: 'bolder', textAlign: 'center' } }),
        render: (value, row) =>
          row.empAssList.map((item, index) => (
            <div>
              <p style={{ marginTop: 12 }}>{item.empAmo}</p>
              {index != row.empAssList.length - 1 ? <Divider type="horizontal" /> : null}
            </div>
          )),
      },
      {
        title: '企业缴费比例(%)',
        dataIndex: 'unitProp',
        align: 'center',
        width: 90,
        onHeaderCell: () => ({ style: { fontWeight: 'bolder', textAlign: 'center' } }),
        render: (value, row) =>
          row.empAssList.map((item, index) => (
            <div>
              <p style={{ marginTop: 12 }}>
                {item.unitProp || Number(item.unitProp) === 0 ? item.unitProp : '--'}
              </p>
              {index != row.empAssList.length - 1 ? <Divider type="horizontal" /> : null}
            </div>
          )),
      },
      {
        title: '个人缴费比例(%)',
        dataIndex: 'empProp',
        align: 'center',
        width: 90,
        onHeaderCell: () => ({ style: { fontWeight: 'bolder', textAlign: 'center' } }),
        render: (value, row) =>
          row.empAssList.map((item, index) => (
            <div>
              <p style={{ marginTop: 12 }}>
                {item.empProp || Number(item.empProp) === 0 ? item.empProp : '--'}
              </p>
              {index != row.empAssList.length - 1 ? <Divider type="horizontal" /> : null}
            </div>
          )),
      },
      {
        title: '滞纳金',
        dataIndex: 'lateFee',
        align: 'center',
        width: 90,
        onHeaderCell: () => ({ style: { fontWeight: 'bolder', textAlign: 'center' } }),
        render: (value, row) =>
          row.empAssList.map((item, index) => (
            <div>
              <p style={{ marginTop: 12 }}>{item.lateFee}</p>
              {index != row.empAssList.length - 1 ? <Divider type="horizontal" /> : null}
            </div>
          )),
      },
      {
        title: '利息',
        dataIndex: 'inte',
        align: 'center',
        width: 90,
        onHeaderCell: () => ({ style: { fontWeight: 'bolder', textAlign: 'center' } }),
        render: (value, row) =>
          row.empAssList.map((item, index) => (
            <div>
              <p style={{ marginTop: 12 }}>{item.inte}</p>
              {index != row.empAssList.length - 1 ? <Divider type="horizontal" /> : null}
            </div>
          )),
      },
      {
        title: '备注',
        dataIndex: 'remark',
        align: 'center',
        width: 90,
        onHeaderCell: () => ({ style: { fontWeight: 'bolder', textAlign: 'center' } }),
        render: value => value || '--',
      },
    ];

    return (
      <div>
        <PageHeaderWrapper>
          <Card className={styles.tabCard}>
            <Tabs defaultActiveKey="1" onTabClick={this.tabChange}>
              <TabPane tab="账单信息" key="1">
                <DescriptionList style={{ marginBottom: 16 }}>
                  <Description term="账户名称">{insBillDetail.insAccoName || '--'}</Description>
                  <Description term="执行地">{insBillDetail.declAreaName || '--'}</Description>
                  <Description term="缴费方式">{insBillDetail.payTypeName || '--'}</Description>
                  <Description term="账单年月">
                    {(insBillDetail.billYm &&
                      `${`${insBillDetail.billYm}`.substr(0, 4)}-${`${insBillDetail.billYm}`.substr(
                        4
                      )}`) ||
                      '--'}
                  </Description>
                  {insBillDetail.diffAmo || Number(insBillDetail.diffAmo) === 0 ? (
                    <Description term="回盘差额">{insBillDetail.diffAmo}</Description>
                  ) : null}
                  {insBillDetail.diffAmoCause ? (
                    <Description term="回盘差额原因">
                      <span title={insBillDetail.diffAmoCause}>
                        {insBillDetail.diffAmoCause.length > 10
                          ? `${insBillDetail.diffAmoCause.substring(0, 10)}...`
                          : insBillDetail.diffAmoCause}
                      </span>
                    </Description>
                  ) : null}
                  <Description term="账单总额">
                    {insBillDetail.payAmo && +insBillDetail.payAmo}
                  </Description>
                  <Description term="涉及人数">{insBillDetail.perNum || '--'}</Description>
                  <Description term="险种">
                    {(insBillDetail.assArrName && insBillDetail.assArrName.join(',')) || '--'}
                  </Description>
                  <Description term="回盘状态">{insBillDetail.rtnStateName || '--'}</Description>
                  <Description term="支付状态">{insBillDetail.payStateName || '--'}</Description>
                  <Description term="备注">{insBillDetail.payRemark || '--'}</Description>
                  <Description term="创建时间">
                    {(insBillDetail.creTime &&
                      moment(insBillDetail.creTime).format('YYYY-MM-DD HH:mm')) ||
                      '--'}
                  </Description>
                  <Description term="操作时间">
                    {(insBillDetail.operTime &&
                      moment(insBillDetail.operTime).format('YYYY-MM-DD HH:mm')) ||
                      '--'}
                  </Description>
                </DescriptionList>
              </TabPane>
              <TabPane tab="账单明细" key="2">
                <div
                  className={styles.tableListForm}
                  style={{
                    margintop: 4,
                    marginBottom: 16,
                    paddingTop: 16,
                    paddingRight: 16,
                    backgroundColor: '#fafafa',
                  }}
                >
                  <Form layout="inline">
                    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                      <Col md={8} sm={24}>
                        <FormItem {...formItemLayout} label="姓名">
                          {getFieldDecorator('empName', {
                            rules: [
                              {
                                required: false,
                                message: '请输入姓名',
                              },
                            ],
                          })(<Input placeholder="请输入姓名" />)}
                        </FormItem>
                      </Col>
                      <Col md={8} sm={24}>
                        <FormItem {...formItemLayout} label="证件号">
                          {getFieldDecorator('certNo', {
                            rules: [
                              {
                                required: false,
                                message: '请输入证件号',
                              },
                            ],
                          })(<Input placeholder="请输入证件号" />)}
                        </FormItem>
                      </Col>
                      <Col md={8} sm={24}>
                        <Button type="primary" onClick={() => this.detial()}>
                          查询
                        </Button>
                        <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
                          重置
                        </Button>
                      </Col>
                    </Row>
                  </Form>
                </div>
                <Row>
                  <Button
                    type="primary"
                    onClick={() => this.downBill()}
                    style={{ marginBottom: 20 }}
                    loading={excelLoading}
                  >
                    {!excelLoading && <DownloadOutlined />}
                    账单下载
                  </Button>
                </Row>
                <StandardTable
                  selectedRows={selectedRows}
                  selectedRowKeys={selectedKeys}
                  loading={loading}
                  data={pageDetailData}
                  columns={columns1}
                  rowKey={(record, index) => index}
                  onSelectRow={this.handleSelectRows}
                  onChange={this.handleStandardTableChange}
                  scroll={scroll}
                  size="small"
                  bordered
                />
              </TabPane>
            </Tabs>
          </Card>
          <FooterToolbar style={{ width: '100%' }}>
            <Button onClick={this.goback}>返回</Button>
          </FooterToolbar>
        </PageHeaderWrapper>
      </div>
    );
  }
}

export default BasicList;
